<template>
  <!-- 日积分明细 -->
  <div class="wise-integral-detail">
    <van-row style="background: #fff">
      <van-col span="12">
        <div class="login-name">{{ loginName }}（{{ loginId }}）</div>
      </van-col>
      <van-col span="12">
        <date-time v-show="type === 'day'" ref="dataTimeRefday" @date="handleChangeDay" />
        <date-time v-show="type === 'month'" ref="dataTimeRefmonth" datetype="year-month" @date="handleChangeMonth" />
      </van-col>
    </van-row>
    <integral-pie ref="integralPieRef" />
    <div class="integral-info" v-if="type === 'day'">
      <div class="info-item">
        <div class="title">当日积分</div>
        <div class="value">{{ info.SCO }}</div>
      </div>
      <div class="info-item">
        <div class="title">月累计积分</div>
        <div class="value">{{ info.SCO_M }}</div>
      </div>
    </div>
    <vxe-table
      v-if="type === 'day'"
      size="small"
      border="inner"
      empty-text="没有更多数据了！"
      :tree-config="{ transform: true, rowField: 'KPI_CODE', parentField: 'PARENT_ID' }"
      :data="tableData"
    >
      <vxe-column field="KPI_NAME" title="指标" tree-node></vxe-column>
      <vxe-column field="KPI_VALUE" title="当日值" width="100">
        <template #default="{ row }">
          <span v-if="row.KPI_VALUE == 0 || row.IFMX == 0">{{ row.KPI_VALUE }}</span>
          <span v-else class="color-click" @click="openDetail(row.KPI_CODE)">{{ row.KPI_VALUE }}</span>
        </template>
      </vxe-column>
      <vxe-column field="KPI_VALUE_M" title="月累计" width="100">
        <template #default="{ row }">
          <span v-if="row.KPI_VALUE_M == 0 || row.IFMX == 0">{{ row.KPI_VALUE_M }}</span>
          <span v-else class="color-click" @click="openDetail(`${row.KPI_CODE}_M`)">{{ row.KPI_VALUE_M }}</span>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-table
      v-else
      size="small"
      border="inner"
      empty-text="没有更多数据了！"
      :tree-config="{ transform: true, rowField: 'KPI_CODE', parentField: 'PARENT_ID' }"
      :data="tableData"
    >
      <vxe-column field="KPI_NAME" title="指标" tree-node></vxe-column>
      <vxe-column field="KPI_VALUE" title="当月值" width="100">
        <template #default="{ row }">
          <span v-if="row.KPI_VALUE == 0 || row.IFMX == 0">{{ row.KPI_VALUE }}</span>
          <span v-else class="color-click" @click="openDetail(row.KPI_CODE)">{{ row.KPI_VALUE }}</span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from 'dayjs'
import integralPie from '@/views/components/publicline/wise/pie.vue'

import {
  dayPie,
  dayKpi,
  monthPie,
  monthKpi,
} from '@/api/publicline/wise.js'

export default {
  components: { dateTime, integralPie },
  data() {
    return {
      time: '',
      loginId: '',
      loginName: '',
      type: '',
      tableData: [],
      info: {},
    }
  },
  created() {
    this.time = this.$route.query.time
    this.loginId = this.$route.query.loginId
    this.loginName = this.$route.query.loginName
    this.type = this.$route.query.type
  },
  mounted() {
    if (this.type === 'month') {
      this.getAccountMonthDate()
      this.getMonthPie()
      this.getMonthKpi()
    } else if (this.type === 'day') {
      this.getAccountDate()
      this.getDayPie()
      this.getDayKpi()
    }
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefday.initDateTime(
          dayjs(this.time).format('YYYY-MM-DD'),
          dayjs(result[0].value).format('YYYY-MM-DD')
        )
      }
    },
    // 获取月账期
    async getAccountMonthDate() {
      const res = await accountDate({ PARAMCODE: 'M' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefmonth.initDateTime(
          dayjs(this.time).format('YYYY-MM'),
          dayjs(result[0].value).format('YYYY-MM')
        )
      }
    },
    handleChangeDay(val) {
      this.time = dayjs(val).format('YYYYMMDD')
      this.getDayPie()
      this.getDayKpi()
    },
    handleChangeMonth(val) {
      this.time = dayjs(val).format('YYYYMM')
      this.getMonthPie()
      this.getMonthKpi()
    },
    async getDayPie() {
      const res = await dayPie({ loginId: this.loginId, dayId: this.time })
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
        const data = [
          { value: this.info.NEW_DEV_SAL_JF || 0, name: '销售发展' },
          { value: this.info.CLWX_SAL_JF || 0, name: '价值运营' },
          { value: this.info.JFJF_SAL || 0, name: '服务维护交付' },
          { value: this.info.SCO_2I || 0, name: '2I交付' },
        ]
        this.$refs.integralPieRef.initPie(this.info.SCO || 0, data, '积分')
      }
    },
    async getDayKpi() {
      const res = await dayKpi({ loginId: this.loginId, dayId: this.time })
      const { result, success } = res
      if (success) {
        this.tableData = result
      }
    },
    async getMonthPie() {
      const res = await monthPie({ loginId: this.loginId, monthId: this.time })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        const data = [
          { value: info.NEW_DEV_SAL_JF || 0, name: '销售发展' },
          { value: info.CLWX_SAL_JF || 0, name: '价值运营' },
          { value: info.JFJF_SAL || 0, name: '服务维护交付' },
          { value: info.SCO_2I || 0, name: '2I交付' },
        ]
        this.$refs.integralPieRef.initPie(info.TOTAL_SCO || 0, data, '积分')
      }
    },
    async getMonthKpi() {
      const res = await monthKpi({ loginId: this.loginId, monthId: this.time })
      const { result, success } = res
      if (success) {
        this.tableData = result
      }
    },
    openDetail(jfType) {
      this.$open.call(this, '/publicline/wise/integralDetail', {
        jfType,
        loginId: this.loginId,
        type: this.type,
        time: this.time,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.wise-integral-detail {
  .login-name {
    padding: 12px 16px;
  }
  .charts {
    background: #fff;
  }
  .integral-info {
    background: #fff;
    padding: 0 16px;
    margin-bottom: 10px;
    .info-item {
      width: 50%;
      text-align: center;
      background-image: url('~@/assets/imgs/publicline/board/bg-card-fz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 16px 0;
      display: inline-block;
      margin-top: 12px;
      margin-bottom: 6px;
    }
    .value {
      font-size: 24px;
      color: #4d98ff;
      margin-top: 3px;
      margin-bottom: 6px;
    }
  }
  // 表格第一列表头设置
  .vxe-table /deep/ .vxe-table--header th:first-child .vxe-cell {
    padding-left: 44px;
  }
  .color-click {
    color: #4d98ff;
    text-decoration: underline;
  }
}
</style>
